<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>草方格</title>
	<meta name="keywords" content="草方格，区块链">
	<meta name="description" content="NFT（Non-Fungible Token) 定义了一种生态中不可分割的、具有唯一性的代币交互和流通的接口规范。">
	<link rel="shortcut icon" type="image/x-icon" href="imgs/favicon.ico">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="./css/style.css">
	<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
	<link rel="stylesheet" href="//at.alicdn.com/t/font_2891829_w4h17j62fwp.css">
	<link rel="stylesheet" href="css/animate.min.css">
  <script src="./js/nav.js"></script>
  <script src="./js/login.js"></script>
</head>
<body>
    <div class="nav">
      <div class="logo">
        <div class="logoImg"><img src="imgs/logo.png" alt="草方格·Square"></div>
        <div class="logoText">
          草方格·Square
        </div>
      </div>
      <div class="search">
        <div class="searchInput">
          <div class="searchBtn">
            <div class="text">商品</div>
            <div class="icon iconfont icon-xiangxia"></div>
          </div>
          <div class="input">
            <div class="icon iconfont icon-sousuo"></div>
            <input type="text" placeholder="请输入搜索的艺术品、专辑或艺术家">
          </div>
        </div>
      </div>
      <div class="navList">
        <div class="navItem">商城</div>
        <div class="navItem icon iconfont icon-renzheng"></div>
        <div class="navItem icon iconfont icon-qianbao"></div>
        <div class="navItem icon iconfont icon-bangzhu"></div>
      </div>
    </div>


    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <video src="imgs/video1.avi" autoplay muted loop></video>
        </div>
        <div class="swiper-slide">
          <video src="imgs/video2.avi" autoplay muted loop></video>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
  
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
  
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"></div> -->
  
      <!-- 轮播中间放置内容 -->
      <div class="swiperMain">
        <h1>Square</h1>
        <h3>让价值自由流通</h3>
        <p>
          <span>潮流</span><span>音乐</span><span>域名</span><span>虚拟世界</span><span>收藏品</span><span>交易卡</span>
        </p>
        <div class="swiperBtn">
          <div class="publishBtn wow bounceInLeft">
            <span class="iconfont icon-fabusekuai"></span>
            <span class="txt">发布NFT</span>
          </div>
          <div class="supermarkBtn wow bounceInRight">
            <span class="iconfont icon-caidan"></span>
            <span class="txt">浏览商城</span>
          </div>
        </div>
      </div>
    </div>

    <div class="goodness">
      <h2>优势</h2>
      <div class="goodList">
        <div class="goodItem wow shake">
          <img src="imgs/net.png" alt="">
          <div class="title">作品众多</div>
          <div class="desc">拥有独家NFT作品，众多前卫创作者，作品分类涵盖范围广。</div>
        </div>
        <div class="goodItem wow flip">
          <img src="imgs/secure.png" alt="">
          <div class="title">安全可信</div>
          <div class="desc">依托司法链与区块链溯源，作品铸造链上留痕，来源可溯，记录可查，版权可信。</div>
        </div>
        <div class="goodItem wow shake">
          <img src="imgs/fear.png" alt="">
          <div class="title">费用更低</div>
          <div class="desc">发行手续费低于行业平均水平；NFT作品交易佣金比例低。</div>
        </div>
        <div class="goodItem wow flip">
          <img src="imgs/clock.png" alt="">
          <div class="title">铸造更快</div>
          <div class="desc">流程操作更便捷，作品生成更迅速。</div>
        </div>
    </div>
  </div>

  <div class="course">
    <h2>教程</h2>
    <div class="courseList">
      <div class="courseItem wow zoomInLeft">
        <img src="imgs/banner1.png" alt="">
        <h3>发布艺术品教程</h3>
        <p>上传您的作品（图像、视频、音频或3D艺术），添加标题和描述，并自定义您的 NFT，包括属性、统计数据和可解锁的内容</p>
      </div>
      <div class="courseItem wow zoomInDown">
        <img src="imgs/banner2.png" alt="">
        <h3>创建账号教程</h3>
        <p>创建平台账号，提交身份资料，进行身份认证，目前平台提供个人身份及企业身份认证，个人身份认证</p>
      </div>
      <div class="courseItem wow zoomInRight">
        <img src="imgs/banner3.png" alt="">
        <h3>购买艺术品教程</h3>
        <p>了解商品的拍卖和购买流程，帮您完成购买心仪的艺术品的愿望。</p>
      </div>
    </div>
  </div>

	<div class="friend">
		<h2>合作伙伴</h2>
		<div class="friends">
			<img class="wow slideInLeft" class="wow slideInLeft" src="imgs/friend1.png" alt="">
			<img class="wow slideInLeft" src="imgs/friend2.png" alt="">
			<img class="wow slideInRight" src="imgs/friend3.png" alt="">
			<img class="wow slideInRight" src="imgs/friend4.png" alt="">
		</div>
	</div>

	<div class="footer">
		© 2020-2025 bowlCake All Rights Reserved.
	</div>

    <div class="zhezhao">
      <div class="loginContent">
        <div class="close">X</div>
      </div>
    </div>
    <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
    <script>
      var mySwiper = new Swiper('.swiper-container', {
        //direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项
  
        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },
  
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
  
        // 如果需要滚动条
        // scrollbar: {
        // 	el: '.swiper-scrollbar',
        // },
      })
    </script>
    <script src="js/wow.min.js"></script>
    <script>
      new WOW().init();
    </script>
</body>
</html>